<template>
  <div>
    <a-button type="primary" @click="addCateShowModel">添加分类</a-button>
    <!-- table表格 -->
    <div class="table">
      <tree-table
        :data="data"
        :columns="columns"
        border
        show-index
        index-text="#"
        :selection-type="false"
        :expand-type="false"
      >
        <template slot="cat_deleted" slot-scope="scope">
          <a-icon type="check-circle" v-show="scope.row.cat_deleted == false" />
          <a-icon type="close-circle" v-show="scope.row.cat_deleted == true" />
        </template>
        <template slot="cat_level" slot-scope="scope">
          <a-tag color="purple" v-if="scope.row.cat_level == 0"> 一级 </a-tag>
          <a-tag color="blue" v-if="scope.row.cat_level == 1"> 二级 </a-tag>
          <a-tag color="orange" v-if="scope.row.cat_level == 2"> 三级 </a-tag>
        </template>
        <template slot="options" slot-scope="scope">
          <a-row :gutter="6">
            <a-col :span="6">
              <a-button
                type="primary"
                icon="edit"
                @click="editCateShowModel(scope.row)"
              >
                编辑
              </a-button>
            </a-col>
            <a-col :span="6">
              <a-popconfirm
                title="你确定要删除吗?"
                ok-text="是的"
                cancel-text="再想想"
                @confirm="deleteCate(scope.row)"
              >
                <a-button type="primary" icon="delete"> 删除 </a-button>
              </a-popconfirm>
            </a-col>
          </a-row>
        </template>
      </tree-table>
    </div>
    <!-- 分页 -->
    <a-pagination
      size="small"
      :total="total"
      show-size-changer
      show-quick-jumper
      @change="changePage"
      @showSizeChange="changeSize"
      :defaultPageSize="5"
      :pageSizeOptions="['5', '10', '15', '20']"
    />
    <!-- 添加分类对话框 -->
    <a-modal
      title="添加分类"
      :visible="isAddCateModel"
      @cancel="closeCateModel"
      @ok="addCate"
      cancelText="取消"
      okText="确定"
    >
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="分类名称">
          <a-input
            v-decorator="[
              'cat_name',
              {
                rules: [{ required: true, message: '请输入你的分类名称' }],
              },
            ]"
            placeholder="请输入你的分类名称"
          />
        </a-form-item>
        <a-form-item label="分类名称">
          <a-cascader
            :options="options"
            placeholder="请选择"
            @change="selectCascader"
            change-on-select
            allowClear
            :field-names="{
              label: 'cat_name',
              value: 'cat_id',
              children: 'children',
            }"
          />
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 修改分类对话框 -->
    <a-modal
      title="修改分类"
      :visible="iseditCateModel"
      cancelText="取消"
      okText="确定"
      @cancel="closeEditCateModel"
      @ok="editCate"
    >
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="分类名称">
          <a-input
            v-decorator="[
              'cat_name',
              {
                rules: [{ required: true, message: '请输入你的分类名称' }],
              },
            ]"
            placeholder="请输入你的分类名称"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this, { name: "dynamic_rule" }),
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      data: [],
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          prop: "cat_deleted",
          type: "template",
          template: "cat_deleted",
        },
        {
          label: "排序",
          prop: "cat_level",
          type: "template",
          template: "cat_level",
        },
        {
          label: "操作",
          prop: "options",
          type: "template",
          template: "options",
        },
      ],
      total: 0,
      isAddCateModel: false,
      iseditCateModel: false,
      options: [],
      cateForm: {
        cat_level: "",
        cat_name: "",
        cat_pid: "",
      },
      cascaderItem: "",
      editCateItem: "",
    };
  },
  created() {
    this.getCateList();
  },
  methods: {
    //获取商品分类列表
    async getCateList() {
      const { data: res } = await this.$http.get("categories", {
        params: this.queryInfo,
      });
      if (res.meta.status !== 200) {
        return this.$message.info(res.meta.msg);
      }
      this.data = res.data.result;
      this.total = res.data.total;
    },
    //显示添加分类模态框
    addCateShowModel() {
      this.isAddCateModel = true;
      this.getParentCateList();
    },
    //获取当前页数
    changePage(page) {
      this.queryInfo.pagenum = page;
      this.getCateList();
    },
    //获取一页的页码
    changeSize(current, size) {
      this.queryInfo.pagenum = 1;
      this.queryInfo.pagesize = size;
      this.getCateList();
    },
    //添加分类
    addCate() {
      if (this.cascaderItem.length > 0) {
        this.cateForm.cat_pid = this.cascaderItem[this.cascaderItem.length - 1];
      } else {
        this.cateForm.cat_pid = 0;
      }
      this.cateForm.cat_level = this.cascaderItem.length;
      this.cateForm.cat_name = this.form.getFieldValue("cat_name");
      this.form.validateFields(async (err) => {
        if (!err) {
          const { data: res } = await this.$http.post(
            "categories",
            this.cateForm
          );
          if (res.meta.status !== 201) {
            return this.$message.info(res.meta.msg);
          }
          this.isAddCateModel = false;
          this.getCateList();
          this.$message.success("添加成功");
        }
      });
    },
    //获取所有父级商品分类
    async getParentCateList() {
      const { data: res } = await this.$http.get("categories", {
        params: {
          type: 2,
        },
      });
      if (res.meta.status !== 200) {
        return this.$message.info(res.meta.msg);
      }
      this.options = res.data;
    },
    //选择级联选择器
    selectCascader(value) {
      this.cascaderItem = value;
    },
    //关闭添加分类对话框
    closeCateModel() {
      this.isAddCateModel = false;
      this.cascaderItem = "";
      this.cateForm.cat_level = 0;
      this.cateForm.cat_pid = 0;
      this.form.resetFields();
    },
    //关闭修改分类对话框
    closeEditCateModel() {
      this.iseditCateModel = false;
    },
    //删除分类
    async deleteCate(row) {
      const { data: res } = await this.$http.delete("categories/" + row.cat_id);
      if (res.meta.status !== 200) {
        return this.$message.info(res.meta.msg);
      }
      this.getCateList();
      this.$message.success(res.meta.msg);
    },
    //修改分类名称
    editCateShowModel(row) {
      this.editCateItem = row;
      this.iseditCateModel = true;
      this.$nextTick(() => {
        this.form.setFieldsValue({
          cat_name: row.cat_name,
        });
      });
    },
    editCate() {
      this.form.validateFields(async (err) => {
        if (!err) {
          const { data: res } = await this.$http.put(
            "categories/" + this.editCateItem.cat_id,
            {
              cat_name: this.form.getFieldValue("cat_name"),
            }
          );
          if (res.meta.status !== 200) {
            return this.$message.info(res.meta.msg);
          }
          this.getCateList();
          this.iseditCateModel = false;
          this.$message.success(res.meta.msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
</style>
